<template>
  <div>
    <Header :back="true"></Header>

    <div class="container">
      <div class="title">财务数据上传</div>

      <van-field label="请选择文件类型" label-width="30vw" v-model="fileType" is-link @click="handleShowTypes"></van-field>
      <van-action-sheet v-model="showTypes" :actions="types" @select="Onselect" cancel-text="取消" close-on-click-action @cancel="onCancel"></van-action-sheet>
      <div style="padding:0 1.5rem">

        <div class="tips">* 资料文件(仅支持excel或xml文件)</div>
        <van-uploader v-model="fileList" :max-count="5" accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, application/pdf">
          <div class="upload_btn">选择文件
            <van-icon name="add-o" />
          </div>
        </van-uploader>
      </div>

      <div class="confirm_btn" @click="onUpload">上传</div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header";
export default {
  components: {
    Header,
  },
  data() {
    return {
      fileType: "",
      types: [
        { name: "进项发票" },
        { name: "销项发票" },
        { name: "银行对账单" },
        { name: "工资表" },
        { name: "销货清单" },
      ],
      showTypes: false,
      fileList: [],
    };
  },
  methods: {
    onUpload() {
      if (this.fileType == "") {
        this.$toast("请选择文件类型");
      } else if (this.fileList.length === 0) {
        this.$toast("请选择文件");
      } else {
        this.$toast.success("上传数据成功");
      }
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";

      setTimeout(() => {
        file.status = "failed";
        file.message = "上传失败";
      }, 1000);
    },
    Onselect(item) {
      this.showTypes = false;
      this.fileType = item.name;
    },
    handleShowTypes() {
      this.showTypes = true;
    },
    onCancel() {
      this.showTypes = false;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 1rem;
  .title {
    font-size: 20px;
    text-align: center;
    margin: 2rem 0;
    color: #999;
  }
  .tips {
    padding: 1.5rem 0;
    color: #ec6e6e;
  }
}

.upload_btn {
  width: 10rem;
  height: 3rem;
  line-height: 3rem;
  background-color: #07c160;
  color: #fff;
  border-radius: 0.5rem;
  text-align: center;
}

.confirm_btn {
  width: 86.5vw;
  height: 4rem;
  line-height: 4rem;
  background-color: #07c160;
  color: #fff;
  border-radius: 0.5rem;
  text-align: center;
  margin: auto;
  margin-top: 2rem;
}
</style>